<template>
  <view class="content" :style="[styles]">
    <text class="title" :style="{color:attribute.titleColor}">{{attribute.title}}</text>
    <span class="red-dot" v-if="attribute.required">*</span>
    <view class="select-area">
      <view class="select-body" @click="handleClick">
        <u--text color="#131313" size="14" v-if="attribute.value" :text="attribute.value"></u--text>
        <u--text color="#B7B7B7" size="14" v-else :text="attribute.placeholder"></u--text>
        <u-icon color="#b1b1b1" name="arrow-down" />
      </view>
      <u-picker :show="show" :defaultIndex="currentIndex" v-model="defaultValue" keyName="label" @change="changeHandler" :columns="columns"
        @cancel="hidePopup" @close="hidePopup" @confirm="handleConfirm">
      </u-picker>
    </view>
    <view class="input-rule-text" v-if="requiredFail">{{attribute.requiredText}}</view>
  </view>
</template>
  
<script>
import { COMPREIFX } from "../../../libs/const/widget";
import { regionData } from 'element-china-area-data'
export default {
  name: `${COMPREIFX}cus-area-picker`,
  props: {
    attribute: Object,
    styles: Object,
  },
  data() {
    return {
      show: false,
      defaultValue: '',
      requiredFail: false,
      columns: [],
      currentIndex: [0,0,0]
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const rootColumn = regionData
      const secondColumn = regionData[0].children
      const thirdColumn = regionData[0].children[0].children
      this.columns = [rootColumn, secondColumn, thirdColumn]
    },
    hidePopup() {
      this.show = false
    },
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
      } = e
      const recursiveSetColumn = (pid, id = 0) => { // 递归设置列
        if (values[pid][id].children) {
          picker.setColumnValues(pid + 1, values[pid][id].children)
          recursiveSetColumn(pid + 1)
        }
      }
      recursiveSetColumn(columnIndex, index)
    },
    handleConfirm({ indexs, value }) {
      this.defaultValue = value.map((item) => item.label).join(' ')
      this.currentIndex = indexs
      this.show = false
      this.attribute.value = this.defaultValue
      this.requiredFail = false
    },
    validate() {
      return new Promise((resolve) => {
        const fail = (this.attribute.required && !this.attribute.value)
        resolve(fail ? this.attribute.requiredText : undefined)
        this.requiredFail = fail
      })
    },
    handleClick() {
      this.show = true
    }
  }
};
</script>
  
<style lang="scss" scoped>
.content {
  padding: 15rpx 20rpx;
}

.title {
  color: #333;
  font-size: 28rpx;
}

.red-dot {
  color: rgb(245, 39, 39);
  margin-left: 5rpx;
}

.select-area {
  margin-top: 22rpx;

  .select-body {
    width: 100%;
    height: 62rpx;
    box-sizing: border-box;
    border: 1rpx #CACACA solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18rpx;
  }
}

.input-rule-text {
  color: #F05357;
  font-size: 24rpx;
  padding: 15rpx 18rpx;
}
</style>
  